<style lang="less">
  #div-truck-load-driver-authentication-info-create-dialog-sy {
    .au-img {
      width: 77%;
      margin: auto;
      background-color: #F2F2F2;
      height: 230px;
    }
    .el-text-align {
      text-align: center;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 350px;
      height: 200px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 350px;
      height: 200px;
      display: block;
    }
  }
</style>

<template>
  <div id="div-truck-load-driver-authentication-info-create-dialog-sy">
    <el-dialog :visible.sync="isShowTruckLoadDriverAuthenticationInfoCreateDialog" width="65%" :modal="false">
     <el-form ref="authenticationForm" :model="authenticationForm" label-width="110px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="真实姓名" prop="realName" :rules="{ required: true, message: '请输入真实姓名', trigger: 'change' }">
              <el-input v-model="authenticationForm.realName"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item prop="idCardNo" label="身份证号" :rules="[{ required: true, message: '请输入身份证号', trigger: 'change' },
            { len: 18, message: '长度控制在 18 个字符', trigger: 'change' }]">
              <el-input v-model="authenticationForm.idCardNo"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item prop="drivingLicenseType" label="准驾车型" :rules="{ required: true, message: '请选择准驾车型', trigger: 'change' }">
              <el-select v-model="authenticationForm.drivingLicenseType" placeholder="请选择准驾车型" class="f-w100">
                <el-option
                  v-for="item in $store.getters.CAR_TYPE"
                  :label="item.cnDictValname"
                  :key="item.dictVal"
                  :value="item.dictVal"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="车牌号" prop="plateNumber" :rules="{ required: true, message: '请输入车牌号', trigger: 'change' }">
              <el-input v-model="authenticationForm.plateNumber"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="车辆所有人" prop="owner" :rules="{ required: true, message: '请输入车辆所有人', trigger: 'change' }">
              <el-input v-model="authenticationForm.owner" ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="车辆类型" prop="vehicleType" :rules="{ required: true, message: '请输入车辆类型', trigger: 'change' }">
              <el-input v-model="authenticationForm.vehicleType"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="车长" prop="vehicleLength" :rules="{ required: true, message: '请选择车长', trigger: 'change' }">
              <el-select v-model="authenticationForm.vehicleLength" placeholder="请选择准车长" class="f-w100">
                <el-option
                  v-for="item in $store.getters.TL_LENGTH_OF_VEHICLE"
                  :label="item.cnDictValname"
                  :key="item.dictVal"
                  :value="item.dictVal"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="核载重量（吨）" prop="loadTon" :rules="{ required: true, message: '请输入核载重量', trigger: 'change' }">
              <el-input type="number" v-model="authenticationForm.loadTon" ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="核载体积（方）" prop="loadParty" :rules="{ required: true, message: '请输入核载体积', trigger: 'change' }">
              <el-input type="number" v-model="authenticationForm.loadParty" ></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="车辆识别代号" prop="frameNo" :rules="{ required: true, message: '请输入车辆识别代号号', trigger: 'change' }">
              <el-input v-model="authenticationForm.frameNo"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <el-form-item label="发动机号" prop="engineNo" :rules="{ required: true, message: '请输入发动机号', trigger: 'change' }">
              <el-input v-model="authenticationForm.engineNo"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row class="f-mt10">
        <el-col :span="12" class="el-text-align">
          <el-upload
            class="avatar-uploader"
            action="/api/v3.0/admin/api/file_upload"
            :show-file-list="false"
            :headers="this.$store.state.headersAuthorization"
            :on-success="idcardFontUrlSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="idcardFontUrl" :src="idcardFontUrl" class="avatar">
            <i class="el-icon-plus avatar-uploader-icon" v-else></i>
          </el-upload>
          <label>身份证人像面照片</label>
        </el-col>
        <el-col :span="12" class="el-text-align">
          <el-upload
            class="avatar-uploader"
            action="/api/v3.0/admin/api/file_upload"
            :show-file-list="false"
            :headers="this.$store.state.headersAuthorization"
            :on-success="idcardBackUrlSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="idcardBackUrl" :src="idcardBackUrl" class="avatar">
            <i class="el-icon-plus avatar-uploader-icon" v-else ></i>
          </el-upload>
          <label>身份证国徽面照片</label>
        </el-col>
      </el-row>
      <el-row class="f-mt10">
        <el-col :span="12" class="el-text-align">
          <el-upload
            class="avatar-uploader"
            action="/api/v3.0/admin/api/file_upload"
            :show-file-list="false"
            :headers="this.$store.state.headersAuthorization"
            :on-success="driverLicenseUrlSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="driverLicenseUrl" :src="driverLicenseUrl" class="avatar">
            <i class="el-icon-plus avatar-uploader-icon" v-else></i>
          </el-upload>
          <label>C1及以上驾驶证照片（正页）</label>
        </el-col>
        <el-col :span="12" class="el-text-align">
          <el-upload
            class="avatar-uploader"
            action="/api/v3.0/admin/api/file_upload"
            :show-file-list="false"
            :headers="this.$store.state.headersAuthorization"
            :on-success="drivingLicenseUrlSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="drivingLicenseUrl" :src="drivingLicenseUrl" class="avatar">
            <i class="el-icon-plus avatar-uploader-icon" v-else></i>
          </el-upload>
          <label>行驶证（正页）</label>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" class="f-fr f-mr10" @click="createAuthenticationClick">
          保存并审核通过
        </el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getSelectObect, isEmpty } from '../../lib/util.js';
import { createAuthentication } from '../../api/v3/TruckLoadDriver.js';

export default {
  name: 'TruckLoadDriverAuthenticationInfoCreateDialog',
  data () {
    return {
      imageUrl: '',
      authenticationForm: {
        auditStatus: 107008004,
        realName: null,
        idCardNo: null,
        drivingLicenseType: null,
        plateNumber: null,
        owner: null,
        vehicleType: null,
        vehicleLength: null,
        loadTon: null,
        loadParty: null,
        frameNo: null,
        engineNo: null,
        /**
         * driverLicenseUrl:   驾驶证正页照URl
         * drivingLicenseUrl:  行驶证正页照URl
         * idcardFontUrl:  身份正面
         * idcardBackUrl:  身份反面
         */
        driverLicenseUrl: null,
        drivingLicenseUrl: null,
        idcardFontUrl: null,
        idcardBackUrl: null
      },
      driverLicenseUrl: null,
      drivingLicenseUrl: null,
      idcardFontUrl: null,
      idcardBackUrl: null,
      loadTonAndLoadParty: null,
      description: null,
      isShowTruckLoadDriverAuthenticationInfoCreateDialog: false
    };
  },
  methods: {
    driverLicenseUrlSuccess (res, file) {
      this.authenticationForm.driverLicenseUrl = res[0];
      this.driverLicenseUrl = URL.createObjectURL(file.raw);
    },
    drivingLicenseUrlSuccess (res, file) {
      this.authenticationForm.drivingLicenseUrl = res[0];
      this.drivingLicenseUrl = URL.createObjectURL(file.raw);
    },
    idcardFontUrlSuccess (res, file) {
      this.authenticationForm.idcardFontUrl = res[0];
      this.idcardFontUrl = URL.createObjectURL(file.raw);
    },
    idcardBackUrlSuccess (res, file) {
      this.authenticationForm.idcardBackUrl = res[0];
      this.idcardBackUrl = URL.createObjectURL(file.raw);
    },
    createAuthenticationClick () {
      this.$refs['authenticationForm'].validate(authenticationFormValid => {
        if (authenticationFormValid) {
          let o = Object.assign({}, this.authenticationForm);
          o.auditStatus = 107008004;
          if (isEmpty(o.driverLicenseUrl) || isEmpty(o.drivingLicenseUrl) || isEmpty(o.idcardFontUrl) || isEmpty(o.idcardBackUrl)) {
            return this.$message.error('请上传所有的证件照');
          }
          o.drivingLicenseType = getSelectObect(o.drivingLicenseType, 'dictVal', this.$store.getters.CAR_TYPE).cnDictValname;
          o.vehicleLength = getSelectObect(o.vehicleLength, 'dictVal', this.$store.getters.TL_LENGTH_OF_VEHICLE).cnDictValname;
          createAuthentication(o).then((res) => {
            if (res.status === 200) {
              this.$message.success('登记成功');
              this.isShowTruckLoadDriverAuthenticationInfoCreateDialog = false;
              this.$emit('commitSuccess', res.data);
            }
          });
        }
      });
    },
    beforeAvatarUpload (file) {
      const isJPG = ['image/jpeg', 'image/png'].contains(file.type);
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('只支持图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    show (authentication) {
      console.log('show TruckLoadDriverAuthenticationInfoCreateDialog.vue');
      this.isShowTruckLoadDriverAuthenticationInfoCreateDialog = true;
      this.authenticationForm = Object.assign({}, authentication);
      if (!isEmpty(this.authenticationForm.drivingLicenseType)) {
        this.authenticationForm.drivingLicenseType = this.getDictCode(this.authenticationForm.drivingLicenseType, this.$store.getters.CAR_TYPE);
      }
      if (!isEmpty(this.authenticationForm.vehicleLength)) {
        this.authenticationForm.vehicleLength = this.getDictCode(this.authenticationForm.vehicleLength, this.$store.getters.TL_LENGTH_OF_VEHICLE);
      }
      this.driverLicenseUrl = isEmpty(this.authenticationForm.driverLicenseUrl) ? null : this.authenticationForm.driverLicenseUrl;
      this.drivingLicenseUrl = isEmpty(this.authenticationForm.drivingLicenseUrl) ? null : this.authenticationForm.drivingLicenseUrl;
      this.idcardFontUrl = isEmpty(this.authenticationForm.idcardFontUrl) ? null : this.authenticationForm.idcardFontUrl;
      this.idcardBackUrl = isEmpty(this.authenticationForm.idcardBackUrl) ? null : this.authenticationForm.idcardBackUrl;
    },
    getDictCode (val, ls) {
      if (isEmpty(val) || isEmpty(ls)) {
        return null;
      }
      let a = ls.filter(l => l.cnDictValname === val);
      if (isEmpty(a)) {
        return val;
      }
      return a[0].dictVal;
    }
  },
  mounted () {}
};
</script>
